<template>
    <baseView>
        <div class="cleanStatistics">
            <div class="echart-form">
                <el-form :inline="true">
                    <el-form-item label="日期选择">
                        <el-date-picker v-model="params.date" type="date" value-format="YYYY-MM-DD" />
                    </el-form-item>
                    <!-- <el-form-item label="开始时间">
                        <el-date-picker v-model="params.startTime" type="date" />
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker v-model="params.endTime" type="date" />
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" @click="search">
                            <el-icon style="margin-right: 2px;">
                                <Search />
                            </el-icon>查询
                        </el-button>
                        <el-button type="primary" plain @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="echart-box">
                <div class="pie-box">
                    <div class="title">沿街商铺总数</div>
                    <chartPane :chartOption="pieOptions" id="cleanPie"> </chartPane>
                </div>
                <div class="dividing-line"></div>
                <div class="line-box">
                    <div class="title">生活垃圾日产日清达标率</div>
                    <chartPane style="margin-top: 30px;" :chartOption="lineOption" id="cleanLine"> </chartPane>
                </div>
            </div>
        </div>
    </baseView>
</template>

<script setup>
import dayjs from "dayjs"
import { shopStatis } from "@/api/cleanStatus"
const params = reactive({
    date: dayjs().format("YYYY-MM-DD")
})


let lineOption = ref({
    tooltip: {
        show: true,
        trigger: 'axis'
    },
    grid: {
        top: "20%",
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['10-1', '10-2', '10-3', '10-4', '10-5', '10-6', '10-7']
    },
    yAxis: {
        name: '单位：%', // 设置 x 轴的标题
        type: 'value',
        min: 0, // y 轴的最小值
        max: 100, // y 轴的最大值
        interval: 20 // 刻度的间隔值
    },
    series: [
        {
            name: '达标率',
            type: 'line',
            data: [30, 40, 50, 44, 41, 68, 80],
            itemStyle: {
                color: "rgba(89, 255, 103, 1)"
            },
            showSymbol: false
        },
    ]
})
let pieOptions = ref({})



const pieData = ref([])

function getShopStatis() {
    pieData.value = []
    shopStatis(params).then(res => {
        if (res.code == 200) {
            pieData.value.push({ name: '未清运', value: res.data['未清运'] })
            pieData.value.push({ name: '已清运', value: res.data['已清运'] })
            pieOptions.value = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: '30%',
                    top: "30%",
                    formatter: (name) => {
                        // 在这里自定义 legend 的显示文本
                        // statModels是后端返回的对象，对应每个参数的总数据
                        let data = pieData.value
                        let flag
                        data.forEach(item => {
                            if (item.name == name) {
                                flag = item
                            }
                        })
                        return `${name}：${flag.value}个`
                    },
                },
                color: ['rgba(255, 225, 125, 1)', 'rgba(128, 232, 225, 1)'],
                series: [
                    {
                        type: 'pie',
                        radius: '70%',
                        data: pieData.value,
                        labelLine: {
                            show: false // 隐藏延伸线
                        },
                        label: {
                            show: false // 隐藏延伸线上的文字
                        }
                    }
                ]
            }
            let cleanRated = res.data['达标率']
            let timeArr = cleanRated.map((item) => {
                return item['时间']
            })
            let realData = cleanRated.map((item) => {
                return item['达标率']
            })
            lineOption.value = {
                tooltip: {
                    show: true,
                    trigger: 'axis'
                },
                grid: {
                    top: "20%",
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: timeArr
                },
                yAxis: {
                    name: '单位：%', // 设置 x 轴的标题
                    type: 'value',
                    min: 0, // y 轴的最小值
                    max: 100, // y 轴的最大值
                    interval: 20 // 刻度的间隔值
                },
                series: [
                    {
                        name: '达标率',
                        type: 'line',
                        data: realData,
                        itemStyle: {
                            color: "rgba(89, 255, 103, 1)"
                        },
                        showSymbol: false
                    },
                ]
            }
        }
    })
}
function search() {
    getShopStatis()
}

function reset() {
    params.date = dayjs().format("YYYY-MM-DD")
    search()
}
onMounted(() => {
    getShopStatis()
})

</script>

<style lang="scss" scoped>
.cleanStatistics {
    height: 100%;
    width: 100%;

    .echart-form {
        display: flex;
        justify-content: flex-end;
    }

    .echart-box {
        width: 100%;
        height: 90%;

        .pie-box {
            height: 40%;
        }

        .line-box {
            height: 60%;
        }

    }

    .dividing-line {
        width: 100%;
        border: 2px solid rgba(229, 229, 229, 1);
    }
}

.pie-box,
.line-box {
    position: relative;

    .title {
        position: absolute;
        top: -2%;
        left: 2%;
        font-size: 18px;
        color: rgba(56, 56, 56, 1);

    }
}
</style>